<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			ul,
			li {
				list-style: none;
				margin: 0;
				padding: 0;
			}
			
			.main_menu .main_menu_title {
				background-color: #fff;
				margin: 0;
				padding: 0;
				color: #337ab7;
				background-color: #F8F8F8;
				padding-left: 10px;
			}
			
			.main_menu {
				background-color: #fff;
				width: 200px;
				height: 500px;
			}
			
			.main_menu ul li {
				color: #337ab7;
				padding-left: 10px;
			}
			
			.main_menu>ul>li:first-child {
				color: #046177;
				background-color: #F8F8F8;
			}
			.content{
				transition: height 500ms;
				overflow: hidden;
			}
			.hide {
				display: none;
			}
			
			.show {
				display: block;
			}
		</style>
	</head>

	<body>
		<div class="main">
			<div class="main_menu">
				<h3 class="main_menu_title">菜单列表</h3>
				<ul>
					<li>
						<span class="change">菜单列表1</span>
						<ul class="content show">
							<li>第一个菜单</li>
							<li>第二个菜单</li>
							<li>第三个菜单</li>
							<li>第四个菜单</li>
							<li>第五个菜单</li>
						</ul>
					</li>
				</ul>
				<ul>
					<li>
						<span class="change">菜单列表2</span>
						<ul class="content hide">
							<li>第一个菜单</li>
							<li>第二个菜单</li>
							<li>第三个菜单</li>
						</ul>
					</li>
				</ul>
				<ul>
					<li>
						<span class="change">菜单列表3</span>
						<ul class="content hide">
							<li>第一个菜单</li>
							<li>第二个菜单</li>
						</ul>
					</li>
				</ul>
				<ul>
					<li>
						<span class="change">菜单列表4</span>
						<ul class="content hide">
							<li>第一个菜单</li>
							<li>第二个菜单</li>
							<li>第三个菜单</li>
							<li>第四个菜单</li>
						</ul>
					</li>
				</ul>

			</div>
		</div>
		<script>
			{
				class Jean{
					constructor(tabUl,content){
						this.tabUl = document.getElementsByClassName(tabUl);
						this.content = document.getElementsByClassName(content);
						this.init();
					}
					init(){
						Array.from(this.tabUl).forEach( (item,index) =>{
							item.addEventListener('click',()=>{
								this.hide();
								this.show(index);
							})
						})
					}
					hide(){
						Array.from(this.content).forEach(item=>{
							item.classList.remove('show');
							item.classList.add('hide');
						})
					}
					show(index){
						console.log(this.content[index])
						if(this.content[index].display == 'block'){
							this.content[index].classList.remove('show');
							this.content[index].classList.add('hide');
						}else{
							this.content[index].classList.add('show');
							this.content[index].classList.remove('hide');
						}
					}					
				}
				new Jean('change','content');
			}
			/*$('.change').click(function() {
				if($(this).next().css('display') == 'block') {
					$(this).next().slideUp();
				} else {
					$('.change').next().slideUp();
					$(this).next().slideDown();
				}
			});*/
		</script>
	</body>

</html>